<template>
  <div>
    <div @click="showPopup">{{ area }}<van-icon name="arrow-down" /></div>
    <van-popup class="popup" v-model="show" closeable position="top">
      <div>
        <h2 class="title">选择区域</h2>
        <div class="box">
          <div class="i" @click="changeArea('全部区域')">全部区域 ({{ qb }})</div>
          <div class="i" v-for="(value, key) in data" @click="changeArea(key)">{{ key }} ({{ value.length }})</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: 'Area',
  props: ['data'],
  data() {
    return {
      show: false,
      area: '全部区域'
    }
  },
  computed: {
    qb() {
      return Object.keys(this.data).reduce((total, value) => total + this.data[value].length, 0)
    }
  },
  methods: {
    showPopup() {
      this.show = true
    },
    changeArea(area) {
      this.area = area
      this.show = false
      this.$emit('change', area)
    }
  }
}
</script>

<style lang='less' scoped>
.title {
  text-align: center;
  font-size: 20px;
  line-height: 55px;
  font-weight: 700;
}

.popup {
  height: 80%;
  text-align: left;
}

.box {
  color: #222;
  border-top: 1px solid #ebebeb;
  padding-left: (20/16rem);
}

.i {
  border-bottom: 1px solid #ebebeb;
}
</style>